<template>
	<view>
		<view class="tab-page">
			<!-- <view class="list-wrapper" v-for="(item,index) in riskRecordList" :key="index"> -->
			<view class="list-wrapper" v-for="item in riskRecordList" :key="item.id" @click="handleToInfo(item)">
				<view class="list-info">
					<view class="list-title">
						<view class="title-left">
							辨识时间：{{item.createTime}}
						</view>
						<view class="title-right" :class="[item.riskLevel == 1?'title-finish':item.riskLevel == 2?'title-close':item.riskLevel == 3?'title-yellow':'title-dyz']">
							{{item.riskLevel == 1?'重大风险':item.riskLevel == 2?'较大风险':item.riskLevel == 3?'一般风险':'低风险'}}
						</view>
					</view>
				</view>
				<view class="list-main">
					<view class="gz-desc">
						<view class="title">危险因素描述</view>
						<view class="desc-reason">{{item.riskFactor}}</view>
					</view>
					<view class="gz-desc">
						<view class="title">事故类型</view>
						<view class="desc-reason">{{item.accidentTypeNames}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<u-loadmore v-if="total>5" :status="status" :line="true" />
		<view class="empty-data" v-if="riskRecordList.length==0">
			<u-empty mode="data" :marginTop="100"></u-empty>
		</view>
		<view class="bottom-subside" style='height: 22px;'></view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//设备数据列表
				riskRecordList: [],
				onoff: true,
				pointId: '',
				//接口请求数据
				params: {
					pn: 1,
					ps: 5,
					pointId: ''
				},
				page: 1,
				total: 0,
				status: 'loadmore',
			}
		},
		onLoad(options) {
			this.pointId = options.pointId
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if (this.params.pn >= this.pages) return;
			this.status = 'loading';
			this.params.pn = ++this.params.pn;
			setTimeout(() => {
				this.getList()
				if (this.params.pn >= this.pages) this.status = 'nomore';
				else this.status = 'loading';
			}, 1000)
		},
		methods: {
			//1.获取列表
			getList() {
				this.params.pointId = this.pointId
				uni.$u.http.post(`/check/mobile/riskIdentifyRecord/pageList`, this.params).then(res => {
					if (res.code == 0) {
						this.riskRecordList = this.riskRecordList.concat(res.data.records);
						this.pages = res.data.pages;
						this.total = res.data.total;
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			// 跳转详情
			handleToInfo(item) {
				uni.navigateTo({
					url: `/pages/subPackagesA/riskIdtion/riskInfo?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}


	.tab-page {
		margin-top: 2rpx;

		.list-wrapper {
			.list-info {
				margin-top: 10rpx;
				background: #fff;
				padding: 20rpx 32rpx;

				.list-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-left {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #666666;
					}

					.title-right {
						// width: 96rpx;
						text-align: center;
						border-radius: 8rpx;
						font-size: 24rpx;
						padding: 8rpx 16rpx;
					}

					.title-ongoing {
						color: #858585;
						background-color: #DBDBDB;
					}
					
					.title-dyz {
						color: #fff;
						background-color: #04AFF1;
					}
					
					.title-yellow {
						color: #2B2B2B;
						background-color: #F9FF03;
					}
					
					.title-close {
						color: #2B2B2B;
						background-color: #FAC10D;
					}
					
					.title-finish {
						color: #fff;
						background-color: #FF0000;
					}
				}

			}

			.list-main {
				padding: 0 0 32rpx 0;
				background: #fff;
				border-top: 1px solid #f2f2f2;
				border-bottom: 16rpx solid #f2f2f2;

				.item-main {
					display: flex;
					justify-content: space-between;
					padding: 4rpx 30rpx;

					.main-left {
						text-align: left;

						.txt1 {
							color: #8c8c8c;
							font-size: 28rpx;
							padding: 10rpx 0;

							.desc-text {
								color: #2b2b2b;
							}
						}

					}
				}
				
				.gz-desc {
					padding: 16rpx 32rpx 0;
				
					.title {
						font-size: 30rpx;
						color: #8c8c8c;
					}
				
					.desc-reason {
						font-size: 32rpx;
						color: #4D4D4D;
						margin-top: 8rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-wrap: break-word;
						word-break: break-all;
					}
				}

				.gz-desct {
					padding: 15rpx 30rpx;

					.title {
						font-size: 28rpx;
						color: #8c8c8c;
						display: flex;
						align-items: center;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;

						.desc-text {
							color: #2b2b2b;
						}

						.img {
							width: 16px;
							height: 16px;
						}
					}

				}
			}
		}
		
		.list-wrapper:last-child{
			.list-main{
				border-bottom: 1px solid #f2f2f2;
			}
		}
	}
</style>
